<template>
	<el-form ref="form" :model="formData" :rules="rules" label-width="100px" label-position="right">
		<el-form-item :label="$lang.columns.name" prop="name">
			<el-input v-model="formData.name"
								:placeholder="$lang.messages.enter + ' ' + $lang.columns.name"
								size="small"></el-input>
		</el-form-item>
		<el-form-item :label="$lang.columns.project" prop="project">
			<el-input v-model="formData.project"
								:placeholder="$lang.messages.enter + ' ' + $lang.columns.project"
								size="small"></el-input>
		</el-form-item>
		<el-form-item :label="$lang.columns.spider" prop="spider">
			<el-input v-model="formData.spider"
								:placeholder="$lang.messages.enter + ' ' + $lang.columns.spider"
								size="small"></el-input>
		</el-form-item>
		<el-form-item :label="$lang.columns.clients" prop="clients">
			<el-select v-model="formData.clients" multiple :placeholder="$lang.messages.select"
								 size="small">
				<el-option
					v-for="item in clientOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item :label="$lang.columns.trigger" prop="trigger">
			<el-select v-model="formData.trigger" :placeholder="$lang.messages.select" size="small">
				<el-option
					v-for="item in triggerOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				</el-option>
			</el-select>
		</el-form-item>
		<div v-if="formData.trigger === 'date'">
			<el-form-item :label="$lang.columns.runDate">
				<el-date-picker v-model="formData.configuration.run_date" class="inline width-200"
												type="datetime" size="small" :value-format="$store.state.dateFormat"
												:picker-options="dateOptions"
												:placeholder="$lang.descriptions.chooseDateTime">
				</el-date-picker>
			</el-form-item>
			<el-form-item :label="$lang.columns.timezone">
				<el-select v-model="formData.configuration.timezone" size="small"
									 filterable :placeholder="$lang.columns.timezone"
									 class="inline width-200">
					<el-option
						v-for="item in timeZones"
						:key="item"
						:label="item"
						:value="item">
					</el-option>
				</el-select>
			</el-form-item>
		</div>
		<div v-if="formData.trigger === 'interval'">
			<el-form-item :label="$lang.columns.runDate">
				<el-form-item :label="$lang.columns.weeks">
					<el-input v-model.number="formData.configuration.weeks"
										:placeholder="$lang.columns.weeks"
										class="inline width-100" type="number"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.days">
					<el-input v-model.number="formData.configuration.days"
										class="inline width-100" type="number"
										:placeholder="$lang.columns.days"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.hours">
					<el-input v-model.number="formData.configuration.hours"
										class="inline width-100" type="number"
										:placeholder="$lang.columns.hours"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.minutes">
					<el-input v-model.number="formData.configuration.minutes"
										class="inline width-100" type="number"
										:placeholder="$lang.columns.minutes"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.seconds">
					<el-input v-model.number="formData.configuration.seconds"
										class="inline width-100" type="number"
										:placeholder="$lang.columns.seconds"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.timezone">
					<el-select v-model="formData.configuration.timezone"
										 filterable :placeholder="$lang.columns.timezone"
										 size="small"
										 class="inline width-200">
						<el-option
							v-for="item in timeZones"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$lang.columns.startDate">
					<el-date-picker
						v-model="formData.configuration.start_date" :format="$store.state.dateFormat"
						:value-format="$store.state.dateFormat"
						type="datetime" size="small" :picker-options="dateOptions" class="inline width-200"
						:placeholder="$lang.columns.startDate">
					</el-date-picker>
				</el-form-item>
				<el-form-item :label="$lang.columns.endDate">
					<el-date-picker
						v-model="formData.configuration.end_date" :picker-options="dateOptions" class="inline width-200"
						type="datetime" size="small" :format="$store.state.dateFormat" :value-format="$store.state.dateFormat"
						:placeholder="$lang.columns.endDate">
					</el-date-picker>
				</el-form-item>
			</el-form-item>
		</div>
		<div v-if="formData.trigger === 'cron'">
			<el-form-item :label="$lang.columns.runDate">
				<el-form-item :label="$lang.columns.year">
					<el-input v-model="formData.configuration.year"
										:placeholder="$lang.columns.year"
										class="inline width-100"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.month">
					<el-input v-model="formData.configuration.month"
										:placeholder="$lang.columns.month"
										class="inline width-100"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.week">
					<el-input v-model="formData.configuration.week"
										class="inline width-100"
										:placeholder="$lang.columns.week"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.dayOfWeek">
					<el-input v-model="formData.configuration.day_of_week"
										class="inline width-100"
										:placeholder="$lang.columns.dayOfWeek"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.day">
					<el-input v-model="formData.configuration.day"
										class="inline width-100"
										:placeholder="$lang.columns.day"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.hour">
					<el-input v-model="formData.configuration.hour"
										class="inline width-100"
										:placeholder="$lang.columns.hour"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.minute">
					<el-input v-model="formData.configuration.minute"
										class="inline width-100"
										:placeholder="$lang.columns.minute"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.second">
					<el-input v-model="formData.configuration.second"
										class="inline width-100"
										:placeholder="$lang.columns.second"
										size="small"></el-input>
				</el-form-item>
				<el-form-item :label="$lang.columns.timezone">
					<el-select v-model="formData.configuration.timezone" size="small"
										 filterable :placeholder="$lang.columns.timezone"
										 class="inline width-200">
						<el-option
							v-for="item in timeZones"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$lang.columns.startDate">
					<el-date-picker
						v-model="formData.configuration.start_date" :format="$store.state.dateFormat"
						:value-format="$store.state.dateFormat"
						type="datetime" size="small" :picker-options="dateOptions" class="inline width-200"
						:placeholder="$lang.columns.startDate">
					</el-date-picker>
				</el-form-item>
				<el-form-item :label="$lang.columns.endDate">
					<el-date-picker
						v-model="formData.configuration.end_date" :format="$store.state.dateFormat"
						:value-format="$store.state.dateFormat"
						type="datetime" size="small" :picker-options="dateOptions" class="inline width-200"
						:placeholder="$lang.columns.endDate">
					</el-date-picker>
				</el-form-item>
			</el-form-item>
		</div>
		<div>
			<el-form-item>
				<slot name="submit"></slot>
				<el-button @click="$router.back()" size="small">
					<i class="fa fa-reply"></i>
					{{ $lang.buttons.return }}
				</el-button>
			</el-form-item>
		</div>
	</el-form>
</template>

<script>
	const {listTimeZones} = require('timezone-support')
	export default {
		name: 'Substance',
		props: {
			id: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				formData: {
					name: null,
					clients: [],
					trigger: null,
					project: null,
					spider: null,
					configuration: {
						run_date: null,
						weeks: null,
						days: null,
						hours: null,
						minutes: null,
						seconds: null,
						month: null,
						week: null,
						day: null,
						hour: null,
						minute: null,
						second: null,
						year: null,
						day_of_week: null,
						timezone: null,
						start_date: null,
						end_date: null,
					}
				},
				clientOptions: [],
				dateOptions: {
					disabledDate(time) {
						// 设置今天及今天之后的日期
						return time.getTime() < Date.now() - 8.64e7
					}
				},
				timeZones: listTimeZones(),
				rules: {
					name: [
						{
							required: true,
							message: this.$store.getters.$lang.columns.name + ' ' + this.$store.getters.$lang.messages.isNull,
							trigger: 'blur'
						},
					],
					project: [
						{
							required: true,
							message: this.$store.getters.$lang.columns.project + ' ' + this.$store.getters.$lang.messages.isNull,
							trigger: 'blur'
						}
					],
					spider: [
						{
							required: true,
							message: this.$store.getters.$lang.columns.spider + ' ' + this.$store.getters.$lang.messages.isNull,
							trigger: 'blur'
						}
					],
					timezone: [
						{
							required: true,
							message: this.$store.getters.$lang.columns.timezone + ' ' + this.$store.getters.$lang.messages.isNull,
							trigger: 'blur'
						}
					]
				},
				triggerOptions: [{
					value: 'date',
					label: 'Date',
				}, {
					value: 'interval',
					label: 'Interval'
				}, {
					value: 'cron',
					label: 'Crontab'
				}],
			}
		},
		mounted() {
			this.getClientData()
			this.getTaskData()
		},
		methods: {
			getClientData() {
				this.$http.get(this.$store.state.url.client.index
				).then(({data: clients}) => {
					clients.forEach((item) => {
						this.clientOptions.push({
							value: item.pk,
							label: item.fields.name
						})
					})
				}).catch(() => {
					this.clients = []
					this.$message.error(this.$store.getters.$lang.messages.loadError)
				})
			},
			getTaskData() {
				if (this.id) {
					this.$http.get(this.formatString(this.$store.state.url.task.info, {
						id: this.id
					})).then(({data: {data: client}}) => {
						this.formData = client
					}).catch(() => {
						this.$message.error(this.$store.getters.$lang.messages.loadError)
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.el-date-editor.el-input {
		width: 152px;
	}

	.el-tag.el-tag--info {
		color: #35CBAA;
	}

	.el-select .el-tag__close.el-icon-close {
		background-color: #EEEEEE;
		&:hover {
			background-color: #CCCCCC;
		}
	}
</style>
